<template>
  <div class="remove-wrap">
    <div class="remove-table">
      <el-form ref="form"
               v-loading="loading"
               label-position="right"
               label-width="100px"
               :rules="rules"
               :model="form">

        <el-form-item label="批准文号"
                      prop="code">
          <el-input v-model="form.code"
                    placeholder="Z20033231"></el-input>
          <div style="line-height: 13px;margin-top: 3px;">如:国药准字Z20033231 只需要填写 Z20033231</div>
        </el-form-item>

        <el-form-item class="contacts-add">
          <el-button type="primary"
                     @click="onSearch">
            查询</el-button>
        </el-form-item>

      </el-form>
      <!-- 搜索结果 -->
      <el-table :data="searchList"
                border
                style="width: 100%">
        <el-table-column prop="title"
                         label="品名"
                         align="center">
        </el-table-column>
        <el-table-column prop="code"
                         label="批准文号"
                         align="center">
        </el-table-column>
        <el-table-column prop="quantity"
                         label="库存"
                         align="center">
        </el-table-column>
        <el-table-column label="操作"
                         align="center">
          <template slot-scope="scope">
            <el-button type="primary"
                       size="small"
                       @click="addRemoveList(scope.row)">确认</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--详细的要出库的药品 -->
    <div class="remove-list">
      <el-table :data="removeList"
                border
                style="width: 100%">
        <el-table-column label="批准文号"
                         align="center"
                         prop="code"></el-table-column>

        <el-table-column label="品名"
                         align="center"
                         prop="title"></el-table-column>

        <el-table-column label="单价"
                         align="center"
                         prop="sell_price"></el-table-column>

        <el-table-column label="数量"
                         align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.quantity"></el-input>
          </template>
        </el-table-column>

        <el-table-column label="小计"
                         align="center">
          <template slot-scope="scope">
            {{ scope.row.quantity*scope.row.sell_price }}
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         align="center">
          <template slot-scope="scope">
            <el-button type="danger"
                       @click="removeItem(scope.row)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-form ref="formInfo"
               class="form-wrap"
               :rules="rulesInfo"
               :model="formInfo"
               label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="备注"
                          prop="notel">
              <el-input v-model="formInfo.notel"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="医生"
                          prop="doctor">
              <el-input v-model="formInfo.doctor"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="病人姓名"
                          prop="older_name">
              <el-input v-model="formInfo.older_name"
                        style="padding-right:0"
                        placeholder="请输入病人姓名">
                <template #suffix>
                  <el-button type="primary"
                             @click="getUserInfo">搜索</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="表单提交">
              <el-button type="primary"
                         @click="submitButton">提交</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-dialog title="快捷添加"
               :visible.sync="dialogVisible"
               width="55%"
               :modal="false">
      <template>
        <el-table v-loading="loadingEd"
                  :data="nameList"
                  border
                  style="width: 100%">
          <el-table-column prop="base.name"
                           label="姓名"
                           align="center">
          </el-table-column>
          <el-table-column label="添加"
                           align="center">
            <template slot-scope="scope">
              <el-button type="primary"
                         @click="setFormUserInfo(scope.row)">添加</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import * as APIMedicalCare from "@/api/medicalCare";
import * as APIMedicalCareDisease from "@/api/medicalCareDisease";
export default {
  name: "MedicineRemove",
  data() {
    return {
      form: {},
      formInfo: {
        notel: "",
        doctor: "",
        oid: 0,
        code: "",
        older_name: "",
        num: "",
      },
      rules: {
        title: [{ message: "请输入药品名称", trigger: "blur" }],
        code: [{ required: true, message: "请输入批准文号", trigger: "blur" }],
        quantity: [
          {
            message: "请输入出库数量",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              if (value < 1) {
                callback(new Error("数量不能小于1"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
      rulesInfo: {
        notel: [{ required: true, message: "请输入备注", trigger: "blur" }],
        doctor: [{ required: true, message: "请输入医生", trigger: "blur" }],
        older_name: [
          { required: true, message: "请输入用药人姓名", trigger: "blur" },
        ],
      },
      loading: false,
      loadingEd: false,
      removeList: [],
      searchList: [],
      dialogVisible: false,
      nameList: [],
    };
  },
  methods: {
    onSearch() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true;
          let params = {
            code: this.form.code,
            title: this.form.title,
          };
          APIMedicalCare.removeResearch(params).then((res) => {
            this.searchList = res.data;
            this.loading = false;
          });
        } else {
          console.log("Form is not valid");
        }
      });
    },
    addRemoveList(item) {
      if (this.removeList.some((existingItem) => existingItem.id === item.id)) {
        this.$message.warning("该项已存在于移除列表中");
      } else {
        if (item.quantity > 1) {
          item.quantity = 1;
          this.removeList.push(item);
          console.log(item);
        } else {
          this.$message("此药品暂无库存");
        }
      }
      const index = this.searchList.indexOf(item);
      if (index !== -1) {
        this.searchList.splice(index, 1);
      }
    },

    removeItem(item) {
      console.log(item);
      const index = this.removeList.indexOf(item);
      if (index !== -1) {
        this.removeList.splice(index, 1);
        this.searchList.push(item);
      }
    },
    async getUserInfo() {
      this.loadingEd = true;
      let userInfo = {
        name: this.formInfo.older_name,
      };
      let res = await APIMedicalCareDisease.jiuZhenUserInfo(userInfo);
      this.nameList = res.data;
      this.dialogVisible = true;
      this.loadingEd = false;
    },
    setFormUserInfo(item) {
      this.formInfo.oid = item.base.oid ? item.base.oid : 0;
      this.formInfo.older_name = item.base.name;
      this.dialogVisible = false;
    },
    submitButton() {
      this.loadingEd = true;
      var newCode = [];
      var numList = [];
      this.removeList.forEach(function (item) {
        newCode.push(item.code);
        numList.push(item.quantity);
      });
      this.formInfo.code = newCode.join(",");
      this.formInfo.num = numList.join(",");
      this.$refs.formInfo.validate((valid) => {
        if (valid) {
          APIMedicalCare.removeDetails(this.formInfo).then((res) => {
            if (res.code !== 200) {
              this.$message("请重新输入");
            } else {
              this.$message.success("提交成功");
              this.form = {};
              this.formInfo = {
                notel: "",
                doctor: "",
                oid: 0,
                code: "",
                older_name: "",
                num: 1,
              };
              this.removeList = [];
              this.searchList = [];
              this.$emit("close-dialog-and-refresh");
              this.loadingEd = false;
            }
          });
        }
      });
    },
  },
};
</script>

<style lang="scss">
.remove-wrap {
  display: flex;
  min-height: 60vh;
  .remove-table {
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 100px;
  }
  .remove-list {
    .form-wrap {
      margin-top: 125px;
    }
  }
}
</style>
